{template 'app_header'}
<link href="{MODULE_URL}template/mobile/app/css/grab_redenvelop2.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="{MODULE_URL}template/mobile/app/js/jquery.nicescroll.min.js"></script>
<style>
.game_tips,.btn_bottom{z-index:8 !important}

#poptip { position: fixed; top:40%;left:50%;width:300px;margin-left:-150px;height: 150px;background: rgba(255, 255, 255, 0.4); opacity: 0; color:#fff;z-index: 999;  border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
#poptip_content { position: fixed; top:40%;left:50%;width:300px;margin-left:-150px; height: 27px; color:#fff;text-align:center;font-size:14px;z-index: 9909;text-align:center;line-height:150px}

</style>
<link rel="stylesheet" href="{MODULE_URL}template/mobile/app/css/spinners.css" type="text/css">
</head>
  <body>
     <div id="loading" style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#333;
    opacity: 0.9;z-index:9999">
	<div id="poptip"></div>
	<div id="poptip_content">
		<div class="dots-loader"> Loading… </div>
	</div>
	</div>
    <div class="main zam">
      <!-- 背景动画 -->
      <div class="bg_rotate animate_rotate"></div>
      <!-- 进入游戏提示 -->
      <div class="game_tips pop_box">
        <img src="{MODULE_URL}template/mobile/app/images/redpack/app/game_tips.png" alt="游戏提示">
		{php echo html_entity_decode($redpack_config['tip_words']);}
      </div>
      <!-- 红包掉落中 -->
      <div class="redenvelop_box pop_box">
        <div class="countNum">
          <p>
            <b>
              <!-- 60 -->0</b>s</p>
          <span>倒计时</span></div>
        <ul class="redenvelop_list">
        </ul>
      </div>
      <!-- 抢到一个红包 -->
      <div class="grab_one_redenvelop pop_box">
        <!-- <a href="javascript:;" class="close">×</a> -->
        <p class="txt">你抢到了一个神秘红包
          <br>快拆开看看</p>
        <div class="one_redenvelop">
          <div class="bg_arc"></div>
          <button href="javascript:;" class="btn_open">拆红包</button>
          <!-- <a href="javascript:;" class="close"></a> -->
          <div class="user_info">
            <img src="{$user['avatar']}">
            <p>
            </p>
            <span>恭喜您获得一个红包！</span></div>
        </div>
      </div>
      <!-- 获得实物奖品 -->
      <div class="prize_redenvelop pop_box">
      </div>
      <!-- 获得现金红包 -->
      <div class="money_redenvelop pop_box">
       </div>
      <!-- 游戏规则 -->
      <div class="game_rule pop_box">
        <div class="tit">游戏规则</div>
        <div class="cont">
			{php echo html_entity_decode($redpack_config['guize']);}
		</div>
      </div>
      <!-- 中奖记录 -->
      <div class="winning_record pop_box">
        <div class="tit">中奖记录</div>
        <ul class="cont"></ul>
      </div>
      <div class="bottom_money">
        <img src="{MODULE_URL}template/mobile/app/images/redpack/app/bottom_money.png"></div>
      <div class="btn_bottom p_game_tips">
        <a href="javascript:;" class="btn_play_start bule">开始进入</a>
        <a href="javascript:;" class="btn_back bule" style="display:none;">返回</a>
        <a href="javascript:;" class="btn_game_rule bule" style="display:none;">游戏规则</a>
        <a href="javascript:;" class="btn_winning_record red">中奖记录
          <!-- <i>7</i> --></a>
        <a href="javascript:;" class="btn_back red" style="display:none;">返回</a></div>
    </div>
    <!-- 弹窗 -->
    <div class="pop_mask"></div>
    <div class="pop_mask_black"></div>
    <script>/*** html节点字体大小随屏幕大小改变 ***/
      $(window).load(function() {
        // 内容垂直居中
        pop_midAuto('.game_tips', 50); //游戏提示
        //pop_midAuto('.winning_record',50); //中奖记录
        //pop_midAuto('.game_rule',50); //游戏规则
        //pop_midAuto('.grab_one_redenvelop',20); //抢到一个红包弹窗
        //pop_midAuto('.prize_redenvelop',0); //打开一个实物奖品红包弹窗
      });

      $(function() {

        // js生成红包个数
        for (var i = 1; i <= 7; i++) {
          if (i == 1) {
            for (var j = 1; j <= 1; j++) {
              $('.redenvelop_box .redenvelop_list').append('<li class="redenvelop' + i + '" id="redenvelop' + i + '_' + j + '"><a href="javascript:;"></a></li>');
            }
          }
          if (i == 2) {
            for (var j = 1; j <= 1; j++) {
              $('.redenvelop_box .redenvelop_list').append('<li class="redenvelop' + i + '" id="redenvelop' + i + '_' + j + '"><a href="javascript:;"></a></li>');
            }
          }
          if (i == 3) {
            for (var j = 1; j <= 2; j++) {
              $('.redenvelop_box .redenvelop_list').append('<li class="redenvelop' + i + '" id="redenvelop' + i + '_' + j + '"><a href="javascript:;"></a></li>');
            }
          }
          if (i == 4) {
            for (var j = 1; j <= 2; j++) {
              $('.redenvelop_box .redenvelop_list').append('<li class="redenvelop' + i + '" id="redenvelop' + i + '_' + j + '"><a href="javascript:;"></a></li>');
            }
          }
          if (i == 5) {
            for (var j = 1; j <= 3; j++) {
              $('.redenvelop_box .redenvelop_list').append('<li class="redenvelop' + i + '" id="redenvelop' + i + '_' + j + '"><a href="javascript:;"></a></li>');
            }
          }
          if (i == 6) {
            for (var j = 1; j <= 3; j++) {
              $('.redenvelop_box .redenvelop_list').append('<li class="redenvelop' + i + '" id="redenvelop' + i + '_' + j + '"><a href="javascript:;"></a></li>');
            }
          }
          if (i == 7) {
            for (var j = 1; j <= 4; j++) {
              $('.redenvelop_box .redenvelop_list').append('<li class="redenvelop' + i + '" id="redenvelop' + i + '_' + j + '"><a href="javascript:;"></a></li>');
            }
          }
        }

        // 内容垂直居中
        pop_midAuto('.game_tips', 50); //游戏提示
		$("#loading").hide();
        // 点击中奖记录按钮(多处)
        $('.btn_winning_record').click(function() {
          $('.nicescroll-rails').show(); //滚动条显示
          member_record();
        });

        // 中奖记录页点返回(一处)
        $('.btn_back.red').click(function() {

          $('.winning_record').hide();
          $('.btn_bottom a').hide();
          $('.nicescroll-rails').hide(); //滚动条也隐藏
          if (parseInt($('.countNum p b').text()) > 0) {
            $('.redenvelop_box').show();
            $('.btn_game_rule , .btn_winning_record').show();
          } else {
            $('.game_tips , .pop_mask').show();
            $('.btn_play_start , .btn_winning_record').show();
          }
        });

        // 点击开始进入按钮(一处)
        $('.btn_play_start').click(function() {
          is_game_start();
        });

        // 点击游戏规则按钮(多处)
        $('.btn_game_rule').click(function() {
          $('.pop_box , .pop_mask').hide();
          $('.btn_bottom a').hide();
          $('.btn_back.bule , .btn_winning_record').show();
          $('.game_rule').show();
          pop_midAuto('.game_rule', 50); //游戏规则
          $('.nicescroll-rails').hide(); //滚动条也隐藏
        });

        // 游戏规则页点返回(一处)
        $('.game_rule').on('click',
			function() {
			  $('.btn_back.bule').click();
			});
        $('.btn_back.bule').click(function() {
          $('.game_rule').hide();
          $('.btn_bottom a').hide();
          if (parseInt($('.countNum p b').text()) > 0) {
            $('.redenvelop_box').show();
            $('.btn_game_rule , .btn_winning_record').show();
          } else {
            $('.game_tips , .pop_mask').show();
            $('.btn_play_start , .btn_winning_record').show();
          }

        });

        // 点中一个红包(一处)
        $('.redenvelop_list li a').click(function() {

          $('.grab_one_redenvelop .btn_open').removeClass('open_anim');
          $('.grab_one_redenvelop .btn_open').html('拆红包');
          $('.grab_one_redenvelop').show();

          $('.redenvelop_box').show();
          $('.pop_mask_black').show();

          pop_midAuto('.grab_one_redenvelop', 20); //抢到一个红包弹窗
          $('.grab_one_redenvelop .btn_open').attr('disabled', false);

        });

        // 抢到一个红包弹窗点关闭
        $('.grab_one_redenvelop .close').on('click',
			function() {
			  $('.grab_one_redenvelop').hide();
			  $('.pop_mask_black').hide();
        });

        // 拆开一个实物红包
        $('.one_redenvelop .btn_open').click(function() {
          $('.grab_one_redenvelop .btn_open').addClass('open_anim');
          $('.grab_one_redenvelop .btn_open').html('等待中');
          $('.grab_one_redenvelop .btn_open').attr('disabled', true);
          $('.redenvelop_box').show();
          open_hongbao();
        });

        //从中奖记录中点中奖红包显示红包详情
        $('.winning_record .prize a').on('click',
			function() {
			  var id = $(this).parent('li').attr('data-id');
			  get_verification_record(id);
        });

       

      });
	  function ge_no_award(){
		 $('.prize_redenvelop').hide();
          $('.pop_mask_black').hide();
	  }
	  function get_one_award(){
			 $('.money_redenvelop').hide();
             $('.pop_mask_black').hide();
	  }	
      //游戏是否开始
      function is_game_start() {
        var data = {
          'rotate_id': "{$redpack['id']}",
        };

        $.post("{php echo $this->createMobileUrl('app_redpack_start',array('rid'=>$rid))}", data,
        function(e) {
         if (e.errno == -1) {
            alert('游戏还没开始,请等待!');
            return;
          }
          if (e.errno == -2) {
            alert('游戏已结束!');
            return;
          }
		  if (e.errno == -3) {
            alert('游戏异常!');
			window.location.reload();
            return;
          }
          $('.countNum p b').text(e.errno);
          var oldss = new Date().getTime();
          var countNum = parseInt($('.countNum p b').text());
          var countNum_timer = setInterval(function() {

            //var newss=new Date().getSeconds();
            var newss = new Date().getTime();

            var ssNum = parseInt(newss / 1000) - parseInt(oldss / 1000);

            if (ssNum > 0) {
              countNum -= ssNum;
              if (countNum < 0) {
                countNum = 0
              }
              $('.countNum p b').text(countNum);
              oldss = newss;
            }
            if (countNum <= 0) {
              clearInterval(countNum_timer);
            }

          },
          200);

          $('.game_tips , .pop_mask').hide();
          $('.btn_bottom a').hide();
          $('.redenvelop_box').show();
          $('.btn_game_rule , .btn_winning_record').show();

          playgame();

        },
        'json');
      }

      //打开红包
      function open_hongbao() {
        var data = {
          'rotate_id': "{$redpack['id']}",
        };

        $.post("{php echo $this->createMobileUrl('redpack_open',array('rid'=>$rid))}", data,
        function(e) {
          if (e.errno == -1) { //错误
			alert('本轮抢红包已经结束啦！');
            window.location.reload();
            return;
          }
		  if (e.errno == -3) { //错误
			alert('轮数错误！');
            window.location.reload();
            return;
          }
		  if (e.errno == -2) { //错误
			alert(e.message);
            //window.location.reload();
            return;
          }
          var html = '';
          if (e.errno == 1) { //没有中奖
            html = '<a href="javascript:;" class="close" onclick="ge_no_award()">×</a>';
			html += '<p class="txt">空空如也/(ㄒoㄒ)/~~</p>';
			html += '<div class="prize_box">';
			html += '<img src="' + e.data.pic + '" class="prize_img">';
			html += '<div class="prize_info">';
			html += '<span>' + e.data.show_msg + '</span>';
			html += '</div>';
			html += '</div>';
            $('.prize_redenvelop').html(html);
            $('.grab_one_redenvelop').hide();
            $('.prize_redenvelop').show();
            pop_midAuto('.prize_redenvelop', 0); //打开一个实物奖品红包弹窗
          } else { //中奖
            e.data.zzs = "{$redpack['zzs']}" ? "本奖品由{$redpack['zzs']}提供": '';
            var member_logo = "{$user['avatar']}";
            html = '<a href="javascript:;" class="close" onclick="get_one_award()">×</a>';
				html += '<p class="txt">恭喜您获得</p>';
				html += '<div class="money_box">';
				html += '<img src="{MODULE_URL}template/mobile/app/images/redpack/app/money_redenvelop_top.png" class="box_top_bg">';
				html += '<div class="box_main">';
				html += '<img src="' + member_logo + '" class="user_photo">';
				html += '<div class="money_info">';
				html += '<span>' + e.data.zzs + '</span>';
				html += '</div>';
				html += '<div class="money">';
				html += '<b>' + e.data.money + '</b>元';
				html += '</div>';
				html += '<p class="txt">已发放到您的微信钱包!</p>';
				html += '</div>';
				html += '</div>';
              $('.money_redenvelop').html(html);
              $('.grab_one_redenvelop').hide();
              $('.money_redenvelop').show();
              //alert($('.money_redenvelop').height());
              pop_midAuto('.money_redenvelop', 0); //打开一个现金红包弹窗
            
          }

        },
        'json');
        $('.redenvelop_box').show();
      }

      function get_verification_record(id) {
        
      }

      //个人中奖记录
      function member_record() {
       var data = {};
        $.post("{php echo $this->createMobileUrl('member_redpack_record',array('rid'=>$rid,'rotate_id'=>$redpack['id']))}", data,
        function(e) {
          var list = e.list;
          var html = '';
          if (list.length > 0) {
            for (var i in list) {
                html += '<li class="money" data-id="' + list[i].id + '"><a href="javascript:;">\
				<div class="user_info">\
				<p>' + list[i].nick_name + '</p>\
				<span>恭喜获得' + list[i].money + '红包！</span>\
				</div>\
				<div class="money_bg"><b>' + list[i].money + '</b></div></a>\
				</li>';
            }
          }
          $('.winning_record ul').html(html);
          $('.pop_box , .pop_mask').hide();
          $('.btn_bottom a').hide();
          $('.winning_record').show();
          $('.btn_game_rule , .btn_back.red').show();
          pop_midAuto('.winning_record', 50); //中奖记录
          // 设置中奖记录弹框滚动条样式
          $(".winning_record .cont").niceScroll({
            cursorcolor: "#ddd",
            cursoropacitymin: '1',
            cursorborder: '0',
            cursorborderradius: '0'
          });

        },
        'json');
      }

      // 开始游戏效果
      function playgame() {
        if (parseInt($('.countNum p b').text()) > 0) {
          //为每个红包设置动画效果
          for (var i = 1; i <= 7; i++) {
            if (i == 1) {
              for (var j = 1; j <= 1; j++) {
                ani_redenvelop('#redenvelop' + i + '_' + j + '', 1500);
              }
            }
            if (i == 2) {
              for (var j = 1; j <= 1; j++) {
                ani_redenvelop('#redenvelop' + i + '_' + j + '', 1200);
              }
            }
            if (i == 3) {
              for (var j = 1; j <= 2; j++) {
                ani_redenvelop('#redenvelop' + i + '_' + j + '', 900 + (j - 1) * 400);
              }
            }
            if (i == 4) {
              for (var j = 1; j <= 2; j++) {
                ani_redenvelop('#redenvelop' + i + '_' + j + '', 1050 + (j - 1) * 300);
              }
            }
            if (i == 5) {
              for (var j = 1; j <= 3; j++) {
                ani_redenvelop('#redenvelop' + i + '_' + j + '', 1000 + (j - 1) * 200);
              }
            }
            if (i == 6) {
              for (var j = 1; j <= 3; j++) {
                ani_redenvelop('#redenvelop' + i + '_' + j + '', 800 + (j - 1) * 200);
              }
            }
            if (i == 7) {
              for (var j = 1; j <= 4; j++) {
                var ani_time = 750 + (j - 1) * 100;
                setTimeout("ani_redenvelop('#redenvelop" + i + "_" + j + "'," + ani_time + ")", (j - 1) * 200);
              }
            }

          }
          var countNum_timer = setInterval(function() {
            //countNum--;
            //$('.countNum p b').text(countNum);
            //var countNum = parseInt($('.countNum p b').text());
            if (parseInt($('.countNum p b').text()) <= 0) {
              clearInterval(countNum_timer);
              location.reload();
            }

          },
          1000);
        }
      }
      var w = $('.redenvelop_box').width();
      function ani_redenvelop(elem, time) {
        $(elem).css({
          'top': '-160px',
          '-webkit-transition': 'top 0ms linear'
        });

        var mywidth = parseInt($(elem).width());
        var myleft = Math.random() * (w - mywidth);
        var mytime = time * 0.7 + time * 0.3 * Math.random();

        $(elem).css({
          'left': myleft + 'px',
          'top': '700px',
          '-webkit-transition': 'top ' + mytime + 'ms linear'
        });

        redenvelop_timer = setTimeout("ani_redenvelop('" + elem + "','" + time + "')", mytime);

        if (parseInt($('.countNum b').text()) <= 0) {
          clearInterval(redenvelop_timer);
        }
      }
      // 弹窗相对屏幕上下居中显示
      function pop_midAuto(pop_box, bottom_h) {
        var popH = $(pop_box).height();
        var topH = (popH + bottom_h) / 2;
        $(pop_box).css('margin-top', -topH);
      }
</script>
 {template 'app_footer'}